<template>
  <el-form label-width="100px">
    <el-form-item v-for="d in item.data.vals" :key="d.code" :label="d.title">
      <div v-if="d.code !== 'objective'">
        <el-select v-model="d.val" size="mini" v-if="d.code === 'physicalGrade'" @change="selPhysicalGrade"  value-key="id">
          <el-option v-for="grade in gradeList" :key="grade.id" :value="grade" :label="grade.name">
            <!--<span style="float: left">{{grade.name}}-{{grade.description}}</span>-->
          </el-option>
        </el-select>
        <div v-else-if="d.code === 'chartsImg'">
          <el-row>
            <el-col :span="7">实时数据：
              <chartsCom :currAnswer="currReport" :currItem="item" v-on:saveImg="saveImg" ></chartsCom>
              <!--每save一次，都是上传一次图片，获取一次地址-->
            </el-col>
            <el-col :span="10">
              <el-row>保存数据：</el-row>
              <img :src="d.val" v-if="d.val"/>
            </el-col>
          </el-row>
        </div>
        <div v-else>{{d.val?d.val:''}}</div>
      </div>
      <div v-if="d.code === 'objective'">
        <el-form label-width="70px">
          <el-form-item v-for="o in d.val" :key="o.code" :label="o.name" style="margin-bottom: 10px">
            <el-input v-model="o.detail" size="mini"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-form-item>
    <el-form-item>
      <div>
        <el-button size="mini" type="primary" @click="savePage(item)"  v-if="item.state === 0">测试·保存</el-button>
        <el-button type="danger" size="mini" @click="delPage">删除</el-button>
        <el-button type="success" size="mini" @click="finishePage" style="float: right;margin-right: 0px"  v-if="item.state === 0">完成</el-button>
      </div>
      <div v-if="item.state === 1">
          <span style="color: red;font-weight: bold">
          报告项已创建完毕
          </span>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import chartsCom from "@/components/answer/charts";
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "No6",
    props: ['item','currReport'],
    components:{chartsCom},
    data() {
      return {
        gradeList:null,
        objective:[
          {name:'调理目标',code:'aims',detail:''},
          {name:'调理周期',code:'cycle',detail:''},
          {name:'调理方式',code:'method',detail:''},
        ]
      }
    },
    created(){
      console.log(this.item)
      if(this.item.data.vals){
        // console.log('有val')
      }else {
        Vue.set(this.item.data,'vals',this.item.reportModule.metadata.detail)
        // console.log('没val')
        this.item.data.vals.forEach(v=>{
          if(v.code === 'objective' ) Vue.set(v,'val',this.objective)
        })
      }
      //加载体质等级列表
      this.getGradeList()
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      saveImg(e){
        let tmp=this.item.data.vals.find(v=>v.code === 'chartsImg')
        console.log(tmp)
        if(tmp){
          Vue.set(tmp,'val',e)
        }
        // console.log(e)
      },
      savePage(){
        console.log(this.item.data.vals)
        this.$emit('save')
      },
      delPage(){
        this.$emit('del')
      },
      finishePage(){
        this.$emit('finish')
      },
      selPhysicalGrade(e){
        console.log(e)
        this.item.data.vals.forEach(v=>{
          for(let key in e){
            if(key === v.code){
              Vue.set(v,'val',e[key])
              // v.val=tmp[key]
            }
          }
        })
        console.log(this.item.data.vals)
      },
      getGradeList(){
        this.fetch({name:"getGradeList"})
          .then(res=>{
            res.sort((r1,r2)=>{
              if(r1.name <r2.name){
                return -1
              }else if(r1.name > r2.name){
                return 1
              }else {
                return 0
              }
            })
            this.gradeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
